import React from "react";

/**
 * 简单优雅的使用style设置自定义样式
 * author: xugq
 * date: 2022-07-27
 *
 * api说明
 * customStyle: 支持react css写法，或者字符串
 * className： 当customStyle为react css写法，该参数需传入进行处理
 */
const useStyle = (customStyle: React.CSSProperties | string, className?: string) => {

  const dealCustomStyle = () => {
    if(typeof customStyle === "string") return <style>{customStyle}</style>;
    if(!className) return null;
    const newCustomStyle: any = customStyle;
    return (
      <style>
        {
          `
            .${className} {
              ${
                Object.keys(newCustomStyle).map(key => `${key}:${newCustomStyle[key] }`).join(";")
              }
            }
          `
        }
      </style>
    )
  };

  return [
    dealCustomStyle()
  ] as const
};

export default useStyle;
